<template>
  <section>
    <el-card>
      <el-page-header @back="$router.back()" content="二维码页面" />
    </el-card>
    <el-card header="二维码内容" class="mt-20">
      <el-input v-model="text" clearable></el-input>
    </el-card>
    <el-card class="mt-20">
      <div id="can">
        <vue-qr :text="text" :size="200"></vue-qr>
      </div>
      <div>
        <el-button v-print="'#can'">打印</el-button>
        <el-button @click="downloadImg()" type="primary">生成图片</el-button>
      </div>
    </el-card>
  </section>
</template>

<script>
import VueQr from "vue-qr";
export default {
  data() {
    return {
      text: 'xxxx'
    }
  },
  components: {
    VueQr
  },
  methods: {
    downloadImg() {
      const img = document.querySelector("#can img");
      const url = img.src;
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      // 下载图名字
      a.download = "二维码.png";
      a.href = url;
      a.dispatchEvent(event);
    }
  }
};
</script>
